<template>
  <view class="card" @click="toDetail">
    <view
      v-if="from === 'apply' || from === 'done'"
      style="position: absolute; top: -20rpx; right: -100rpx; width: 200rpx; height: 220rpx"
    >
      <billStatus
        :color="getType(_D.businessStatus)?.color"
        :title="getType(_D.businessStatus)?.name"
        size="120rpx"
      ></billStatus>
    </view>

    <view class="main flex items-stretch">
      <view class="flex-1">
        <view class="title_row flex left flex-1">
          <view class="title">{{ _D.billName }}</view>
          <!-- <view style="width: 120rpx; height: 120rpx; position: relative"> -->

          <!-- </view> -->
          <!-- <wd-tag
            v-if="from === 'apply' || from === 'done'"
            style="padding: 10rpx 20rpx; font-size: 26rpx; border-radius: 6rpx"
            :bg-color="getType(_D.businessStatus)?.color"
            :color="getType(_D.businessStatus)?.color"
            plain
          >
            {{ getType(_D.businessStatus)?.name }}
          </wd-tag> -->
        </view>
        <view class="row flex">
          <view class="col">
            <text class="label">业务单号：</text>
            <text class="text">{{ _D.businessCode || '' }}</text>
          </view>
        </view>
        <view class="row flex">
          <view class="col">
            <text class="label">所属公司：</text>
            <text class="text">{{ _D.tenantName || '' }}</text>
          </view>
        </view>
        <view class="row flex" v-if="from !== 'apply'">
          <view class="col">
            <text class="label">发&nbsp;&nbsp;起&nbsp;&nbsp;人：</text>
            <text class="text">{{ _D.startUserName }}</text>
          </view>
        </view>
        <template
          v-if="
            (from == 'pending' || from == 'done') &&
            _D.customExtensionBusinessFieldList &&
            _D.customExtensionBusinessFieldList.length
          "
        >
          <view
            class="row flex"
            v-for="(item, index) in _D.customExtensionBusinessFieldList"
            :key="index"
          >
            <view class="col">
              <text class="label">{{ item.label }}：</text>
              <text class="text">{{ item.value }}</text>
            </view>
          </view>
        </template>
        <view class="row flex" v-if="from == 'apply' && !_D.endTime">
          <view class="col">
            <text class="label">当前节点：</text>
            <text class="text">{{ _D.currentActivityName }}</text>
          </view>
        </view>
        <view class="row flex" v-if="from == 'apply' && !_D.endTime">
          <view class="col">
            <text class="label">审&nbsp;&nbsp;核&nbsp;&nbsp;人：</text>
            <text class="text">{{ _D.currentAssigneeName }}</text>
          </view>
        </view>
        <view class="row flex">
          <view class="col">
            <text class="label">发起时间：</text>
            <text class="text">{{ _D.startTime }}</text>
          </view>
        </view>
        <view class="row flex" v-if="from == 'done'">
          <view class="col">
            <text class="label">审核节点：</text>
            <text class="text">{{ _D.activityName }}</text>
          </view>
        </view>
        <view class="row flex" v-if="from == 'done'">
          <view class="col">
            <text class="label">审核时间：</text>
            <text class="text">{{ _D.endTime }}</text>
          </view>
        </view>
        <view class="row flex" v-if="from == 'apply' || from == 'copy'">
          <view class="col">
            <text class="label">结束时间：</text>
            <text class="text">{{ _D.endTime }}</text>
          </view>
        </view>
        <view class="row flex" v-if="from == 'copy'">
          <view class="col">
            <text class="label">抄送时间：</text>
            <text class="text">{{ _D.copyTime }}</text>
          </view>
        </view>
        <!-- <view class="row flex">
          <view class="col">
            <text class="label">发起时间：</text>
            <text class="text">{{ _D.startTime }}</text>
          </view>
        </view> -->
      </view>
    </view>
    <!-- <view class="footer flex" v-if="showFooter">
      <view class="row flex">
        <view class="col">
          <text class="label" style="font-size: 30rpx">申请人：{{ _D.userName }}</text>
          <text class="text highlight"></text>
        </view>
      </view>
      <view class="action">
        <view class="btn primary" @click.stop="toDetail(_D)">
          <text>查看</text>
        </view>
      </view>
    </view> -->
  </view>
</template>

<script lang="ts" setup>
const { appContext } = getCurrentInstance();
import { objectToQuery } from '@/utils/util';
const props = defineProps({
  _D: {
    type: Object,
    default: () => {},
  },
  showFooter: {
    type: Boolean,
    default: false,
  },
  from: {
    type: String,
    default: '',
  },
  statusList: {
    type: Array,
    default: () => [],
  },
});
const isClicking = ref(false);
const toDetail = () => {
  if (isClicking.value) return;
  isClicking.value = true;
  let path = props._D.appRoute || '/task/detail?processInstanceId=' + props._D.processInstanceId;
  uni.navigateTo({
    url: path,
    complete: () => {
      isClicking.value = false;
    },
  });
  // 处理路径  参数如果携带在路由上不自动处理参数
  // let option = {} as any;
  // const query = {
  //   processInstanceId: props._D.processInstanceId,
  // };
  // const url = props._D.appRoute || '/task/detail';
  // const urlOption = url.split('?');
  // const path = urlOption[0];
  // if (urlOption.length > 1) {
  //   const urlOptionF = urlOption[1];
  //   const urlOptionO = urlOptionF.split('&');
  //   if (urlOptionO.length > 0) {
  //     urlOptionO.map((item) => {
  //       const key = item.split('=')[0];
  //       const value = item.split('=')[1];
  //       query[key] = value;
  //       return item;
  //     });
  //   }
  // }
  // option = {
  //   path,
  //   query,
  // };
  // appContext.config.globalProperties.$navigateTo(option);
};
const getType = (type) => {
  let current = {};
  if (Number.isNaN(+type)) {
    current = {
      name: type,
      color: '#999',
    };
  } else {
    current = props.statusList.find((item: any) => +item.key === +type);
  }
  return current;
};
const getActionType = (type) => {
  const emun = [
    { key: '同意', type: 'success', name: '同意' },
    { key: '拒绝', type: 'warning', name: '拒绝' },
  ];
  const current = emun.find((item) => item.key === type);
  return current || emun[0];
};
</script>

<style scoped lang="scss">
.card {
  padding: 24rpx 20rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  background: #fff;
  border-radius: 15rpx;
  position: relative;
  /* box-shadow: 0 15rpx 10rpx 0 #f7f7f7; */
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.main {
  .title_row {
    align-items: flex-start;
    overflow: hidden;
  }

  .title {
    flex: 1;
    margin-bottom: 32rpx;
    overflow: hidden;
    font-size: 32rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .row {
    align-items: flex-start;
    margin-bottom: 24rpx;

    .col {
      display: flex;
      flex: 1;
      min-width: 45%;
      line-height: 28rpx;

      ~ .col {
        margin-left: 12rpx;
      }

      .label {
        flex-shrink: 0;
        width: 132rpx;
        font-size: 26rpx;
        color: #888;
      }

      .text {
        font-size: 28rpx;
        color: #000;
      }
    }
  }

  .left {
    overflow: hidden;
  }

  .right {
    flex-shrink: 0;
    margin-left: 12rpx;
    font-size: 24rpx;
    color: #666;
  }
}

.footer {
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding-top: 24rpx;
  font-size: 24rpx;
  color: #666;

  &::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1rpx;
    content: '';
    background-color: #f3f3f3;
  }

  .unit ~ .unit {
    margin-left: 18rpx;
  }

  .action {
    position: relative;
    right: -24rpx;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: 6rpx 24rpx;
    font-size: 26rpx;

    .btn {
      padding: 6rpx 12rpx;

      ~ .btn {
        margin-left: 16rpx;
      }
    }

    .primary {
      color: #007aff;
    }

    .danger {
      color: #f56c6c;
    }
  }
  /* // .action {
        // 	padding: 6rpx 0 6rpx;
        // 	font-size: 26rpx;
        // 	color: #007aff;
        // } */
}
</style>
